<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @getAdd="addFun" :arr="list"></TodoHeader>
    <TodoMain :arr="showArr" @delFun="del"></TodoMain>
    <TodoFooter :arr="showArr" @CutAdd="CutFn" @clearBtn="clearFun"></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
// 1.1 引入子组件  
import TodoHeader from "./作业4/TodoHeader.vue";
import TodoMain from "./作业4/TodoMain.vue";
import TodoFooter from "./作业4/TodoFooter.vue";


export default {
  data() {
    return {
      str:'',  // all 全部  yes 已完成  no 未完成
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    }
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  methods: {
    // 添加任务
    addFun(val) {
      this.list.push({
        id: this.list.length > 0 ? this.list.at(-1).id : 100,
        name: val,
        isDone:false,
      })
    },
    // 删除任务
    del(index) {
      this.list.splice(index, 1)
    },
    // 切换任务
    CutFn(val) {
      this.str = val
    },
    // 清除已完成
    clearFun() {
        this.list = this.list.filter(item => !item.isDone)
    }
  },
  // 计算已完成未完成
  computed: {
    showArr() {
      if (this.str === 'yes') {
           return this.list.filter(item => item.isDone)
      } else if(this.str === 'no') {
           return this.list.filter(item => !item.isDone)
      } else {
           return  this.list
      }
    }
  }
};
</script>